<template>
  <div class="contianer">
    <div class="edit-con">为了给您提供更精准的服务，请详细填写您的店铺信息</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="发布人" prop="reName">
        <el-input v-model="ruleForm.reName" placeholder="例:张三"></el-input>
      </el-form-item>
      <el-form-item label="联系方式" prop="rePhone">
        <el-input v-model="ruleForm.rePhone" placeholder="例:18312341234"></el-input>
      </el-form-item>
      <el-form-item label="发布类型" prop="pushType">
        <el-select v-model="ruleForm.pushType" style="width:100%;">
          <el-option label="转让" value="1"></el-option>
          <el-option label="出租" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区域" prop="province">
        <el-cascader
          style="width:100%;"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address" placeholder="例:浦东新区张江镇汇智国际三楼"></el-input>
      </el-form-item>
      <el-form-item label="店名" prop="shName">
        <el-input v-model="ruleForm.shName" placeholder="重庆高老九火锅店"></el-input>
      </el-form-item>
      <el-form-item label="租金" prop="rentPrice">
        <el-input v-model="ruleForm.rentPrice" placeholder="单位/元"></el-input>
      </el-form-item>
      <el-form-item label="转让费" prop="attornPrice">
        <el-input v-model="ruleForm.attornPrice" placeholder="单位/元"></el-input>
      </el-form-item>
      <el-form-item label="面积" prop="shAcreage">
        <el-input v-model="ruleForm.shAcreage" placeholder="单位/平方米（/㎡）"></el-input>
      </el-form-item>
      <el-form-item label="商铺区况" prop="isShopAdrType">
        <el-select v-model="ruleForm.isShopAdrType" style="width:100%;">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in items" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="经营业态" prop="isShopType">
        <el-select v-model="ruleForm.isShopType" style="width:100%;">
          <el-option :label="item.name" :value="item.id" v-for="(item,index) in list" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="配套" prop="isParts">
        <el-checkbox-group v-model="ruleForm.isParts">
          <el-checkbox
            :label="item.id"
            v-for="(item,index) in checkboxs"
            :key="index"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="图片上传" prop="shPic">
        <el-row>
          <el-col :span="8">
            <el-upload
              :action="$api.uploadImgs()"
              :before-upload="before_Upload"
              list-type="picture-card"
              :on-remove="handleRemove"
              :limit="3"
              :file-list="fileList"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
          <el-col :span="8">
            <el-upload
              :action="$api.uploadImgs()"
              :before-upload="before_Upload"
              list-type="picture-card"
              :limit="3"
            >
              <i slot="default" class="el-icon-plus"></i>
            </el-upload>
          </el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="基本描述" prop="shDesc">
        <el-input
          type="textarea"
          :rows="4"
          v-model="ruleForm.shDesc"
          placeholder="请输入更多描述：如该铺的营业执照可以转让"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item> -->
      <div class="fabu">
        <el-button type="primary" @click="savePush('ruleForm')">马上发布</el-button>
      </div>
      <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
      <!-- </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText,TextToCode } from "element-china-area-data";
export default {
  data() {
    return {
      options: regionDataPlus,
      selectedOptions: [""],
      ruleForm: {
        reName: "",
        rePhone: "",
        pushType: "1",
        address: "",
        shName: "",
        rentPrice: "",
        attornPrice: "",
        shAcreage: "",
        isShopAdrType: "",
        isShopType: "",
        isParts: [],
        shDesc: "",
        onArea: "",
        onCity: "",
        province: ""
      },
      shPic: "",
      rules: {
        reName: [{ required: true, message: "请填写发布人", trigger: "blur" }],
        rePhone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            pattern: /^[1]([3-9])[0-9]{9}$/,
            message: "请填写正确的手机号",
            trigger: "blur"
          }
        ],
        address: [
          { required: true, message: "请填写详细地址", trigger: "blur" }
        ],
        shName: [{ required: true, message: "请填写店名", trigger: "blur" }],
        rentPrice: [
          { required: true, message: "请填写租金", trigger: "blur" },
          {
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "请填写数字",
            trigger: "blur"
          }
        ],

        isShopAdrType: [
          { required: true, message: "请选择商铺区况", trigger: "change" }
        ],
        isShopType: [
          { required: true, message: "请选择经营业态", trigger: "change" }
        ],
        attornPrice: [
          { required: true, message: "请填写转让费", trigger: "blur" },
          {
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "请填写数字",
            trigger: "blur"
          }
        ],
        shAcreage: [
          { required: true, message: "请填写面积", trigger: "blur" },
          {
            pattern: /^[+-]?(0|([1-9]\d*))(\.\d+)?$/g,
            message: "请填写数字",
            trigger: "blur"
          }
        ],
        shDesc: [{ required: true, message: "请填写描述", trigger: "blur" }]
      },
      items: [],
      checkboxs: [],
      list: [],
      imglist: [],
      listBox: [],
      fileList:[]
    };
  },
  created() {
    this.getShopeaddrList();
    this.getShopeParts();
    this.getShopeTypeList();
    if (this.$route.query.id){
      this.getDetail()
    }
  },
  methods: {
    handleChange(val) {
      this.ruleForm.province = CodeToText[val[0]];
      this.ruleForm.onCity = CodeToText[val[1]];
      this.ruleForm.onArea = CodeToText[val[2]];
    },

    before_Upload(file) {
      //  表单提交方式
      let FormDatas = new FormData();
      FormDatas.append("files", file);
      let that = this;
      this.$http.post(this.$api.uploadImgs(), FormDatas).then(res => {
        if (res.data.code == 0) {
          this.imglist.push(res.data.filesUpload[0]);
        }
      });
    },
    handleRemove(){},
    savePush(formName) {
      // 保存发布
      if (this.imglist.length == 1) {
        this.shPic = this.imglist[0];
      } else if (this.imglist.length == 2) {
        this.shPic = this.imglist[0] + "," + this.imglist[1];
      } else {
        this.shPic = this.imglist[0] + "," + this.imglist[1] + "," + this.imglist[2];
      }
      var pushData = new FormData();
      pushData.append("reId", this.$store.state.userInfo.userId); // 发布者id
      pushData.append("rePhone", this.ruleForm.rePhone); // 发布者tel
      pushData.append("reName", this.ruleForm.reName); // 发布者
      pushData.append("reType", this.ruleForm.pushType); // 发布类型
      pushData.append("province", this.ruleForm.province); // 省
      pushData.append("city", this.ruleForm.onCity); // 市
      pushData.append("arer", this.ruleForm.onArea); // 区
      pushData.append("shAddress", this.ruleForm.address); // 详细地址
      pushData.append("shName", this.ruleForm.shName); // 店名
      pushData.append("rentPrice", this.ruleForm.rentPrice); // 租金
      pushData.append("attornPrice", this.ruleForm.attornPrice); // 转让费
      pushData.append("shAcreage", this.ruleForm.shAcreage); // 面积
      pushData.append("shRegionType", this.ruleForm.isShopAdrType); // qukuang
      pushData.append("shType", this.ruleForm.isShopType); // 经营类型
      pushData.append("shParts", this.ruleForm.isParts); // 配套
      pushData.append("shPic", this.shPic); // 图片
      pushData.append("shDescribe", this.ruleForm.shDesc); // 描述
      this.$refs[formName].validate(valid => {
        if (valid) {
          if(this.selectedOptions[0]==""){
            this.$message.warning("请选择区域");
            return false;
          }
          if (this.listBox.length == 0) {
           // this.$message.warning("请勾选配套");
            //return false;
          }
          if (this.imglist.length == 0) {
            this.$message.warning("请上传图片");
            return false;
          }
          let api = this.$api.pushshope()
          if (this.$route.query.id){
            api = this.$api.updateShop()
          }
          this.$http.post(api, pushData).then(res => {
            if (res.data.code === 0) {
              this.$message.success(res.data.msg);
              this.$router.push("/setting/myshop");
              //this.$store.state.activeIndex = "/findshop"
               /* setTimeout(() => {
                  this.$router.go(0);
                }, 1000);*/
            } else {
              this.$message.error(res.data.msg);
            }
          });
        }
      });
    },
    getShopeTypeList() {
      // 商铺类型 美食餐饮
      this.$http.get(this.$api.getShopsTypes()).then(res => {
        if (res.data.code === 0) {
          this.list = res.data.ShopsTypes;
        }
      });
    },
    getShopeaddrList() {
      // 商铺区域类型
      this.$http.get(this.$api.getSRTypes()).then(res => {
        if (res.data.code === 0) {
          this.items = res.data.srTypes;
        }
      });
    },
    getShopeParts() {
      // 配套设施
      this.$http.get(this.$api.getShopsParts()).then(res => {
        if (res.data.code === 0) {
          this.checkboxs = res.data.Partss;
          for (let i = 0; i < this.checkboxs.length; i++) {
            this.checkboxs[i] = {
              checked: false,
              name: this.checkboxs[i].name,
              id: this.checkboxs[i].id
            };
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getDetail() {
      this.$http
        .get(this.$api.getShopsInfo(), {
          params: {
            shopsId: this.$route.query.id
          }
        })
        .then(res => {
          if (res.data.code === 0) {
           // this.shPic = this.shPicToArr(res.data.shopsInfo.shPic);
            //this.detailData = res.data.shopsInfo;
            const  data = res.data.shopsInfo
            Object.assign(this.ruleForm,data)
            this.ruleForm.address = data.shAddress
            this.ruleForm.shDesc = data.shDescribe
            this.ruleForm.isParts = data.shParts.split(',').map(item=>parseInt(item))
            this.selectedOptions = [TextToCode[data.province].code,TextToCode[data.province][data.city].code,TextToCode[data.province][data.city][data.arer].code]
            this.ruleForm.isShopType = this.list.find(item=>item.name ===data.shType).id
            this.ruleForm.isShopAdrType = this.items.find(item=>item.name ===data.shRegionType).id
            this.imglist = this.shPic.split(',')
            this.fileList = this.imglist.map(item=>({url:item,name:''}))
          }
        });
    },
  }
};
</script>
<style scoped lang="less">
.demo-ruleForm {
  width: 600px;
  margin: auto;
}
.edit-con {
  color: #ff5001;
  font-size: 17px;
  text-align: center;
  padding-bottom: 20px;
}
.contianer {
  //width: 1200px;
  margin: 20px auto;
  background: #fff;
  padding: 20px;
  text-align: left;
  line-height: 35px;
  font-size: 16px;
}
.fabu {
  margin: 50px 0;
  text-align: center;
  button {
    background: #ff5001;
    color: #fff;
    border: 1px solid #ff5001;
    width: 200px;
    font-size: 15px;
  }
}
</style>
